<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <!--semantic-ui-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link th:href="@{/static/qinjiang/css/qinstyle.css}" rel="stylesheet">
</head>
<body>

<!--主容器-->
<div class="ui container">

    <div class="ui segment" id="index-header-nav" th:fragment="nav-menu">
        <div class="ui secondary menu">
            <a class="item"  th:href="@{/}">首页</a>
            <div class="right menu">
                <a  class="item" href="/toLogin">
                    <i class="address card icon"></i>登录</a>
            </div>
            <!--  isAuthenticated已认证
                  sec:authentication="name   展示名字
                  sec:authentication="principal.authorities  展示角色及拥有的权限
             -->
            <div sec:authorize="isAuthenticated()">
                <a class="item">
                    用户名:    <span sec:authentication="name"></span> &nbsp&nbsp
                    角色 <span sec:authentication="principal.authorities"></span>
                </a>
                <a  class="item" href="/logout">
                    <i class="sign-out  icon"></i>注销</a>
            </div>
        </div>
    </div>
    </div>

    <div class="ui segment" style="text-align: center">
        <h3>Spring Security Study By 杰</h3>
    </div>

<div class="ui three column doubling stackable grid container">
    <div class="column" sec:authorize="hasRole('vip1')">
        <div class="ui card">
            <div class="content">
                <div class="title">Level1</div>
                <div class="ui divider"></div>
                <a th:href="@{/level1/1}" class="item"> Level-1-1 </a>
                </a>
                <br>
                <a th:href="@{/level1/2}" class="item"> Level-1-2 </a>
                </a>
                <br>
                <a th:href="@{/level1/3}" class="item"> Level-1-3 </a>
            </div>
        </div>
    </div>
    <div class="column" sec:authorize="hasRole('vip2')">
        <div class="ui card">
            <div class="content">
                <div class="title">Level2</div>
                <div class="ui divider"></div>
                <a th:href="@{/level2/1}" class="item"> Level-2-1 </a>
                </a>
                <br>
                <a th:href="@{/level2/2}" class="item"> Level-2-2 </a>
                </a>
                <br>
                <a th:href="@{/level2/3}" class="item"> Level-2-3 </a>
                </a>
                <br>
            </div>
        </div>
    </div>
    <div class="column">
        <div class="ui card">
            <div class="content">
                <div class="title">Level3</div>
                <div class="ui divider"></div>
                <a th:href="@{/level3/1}" class="item"> Level-3-1 </a>
                </a>
                <br>
                <a th:href="@{/level3/2}" class="item"> Level-3-2 </a>
                </a>
                <br>
                <a th:href="@{/level3/3}" class="item"> Level-3-3 </a>
                </a>
                <br>
            </div>
        </div>
    </div>
</div>

</div>


<script th:src="@{/static/qinjiang/js/jquery-3.1.1.min.js}"></script>
<script th:src="@{/static/qinjiang/js/semantic.min.js}"></script>

</body>
</html>
